<template>
	<view class="s-page-wrapper is-100vh">
		<view class="has-mgt-10">
			<view class="is-flex is-column is-justify-center  is-align-center is-height-100">
				<image src="../../static/logo.png" mode="aspectFit" class="logoimg"></image>
			</view>
		</view>
		<view class="registercontent">
			<view class="has-mglr-10 ">
				<view class=" has-mgtb-10 ">
					<input type="number" maxlength="11" placeholder="请输入手机号" class="is-input1 " v-model="form.loginName" />
				</view>
				<view class=" has-mgtb-10 ">
					<input type="number" maxlength="6" placeholder="短信验证码" class="is-input1 " v-model="form.code" />
					<view class="codeimg" @tap="getsmscode">{{smsbtn.text}}</view>
				</view>

				<view class=" has-radius has-mgtb-10">
					<input placeholder="请输入新密码" :password="true" class="is-input1"  v-model="form.password"/>
				</view>
				<view class="uni-padding-wrap has-radius has-mgtb-20">
					<button style="width: 100%;" type="primary" @click="findBackPwd">修改密码</button>
				</view>
				<view class="normal-text">
					<navigator url="login" class="is-right is-grey " >
						<text>已有账号登录</text>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import userService from '@/api/user.js'
	export default {
		data() {
			return {
				form: {
					loginName: "",
					password: "",
					code: ""
				},
				smsbtn: {
					text: '获取验证码',
					status: false,
					codeTime: 60
				},
				timerId: null,
			};
		},
		methods: {
			getsmscode: function() {
				if (this.form.loginName) {
					userService.getSmsCode(this.form.loginName).then(res => {
						if (res.data.success) {
			
							this.timerId = setInterval(() => {
									var codeTime = this.smsbtn.codeTime;
									codeTime--;
									this.smsbtn.codeTime = codeTime;
									this.smsbtn.text = codeTime + "S";
									if (codeTime < 1) {
										clearInterval(this.timerId);
										this.smsbtn.text = "重新获取";
										this.smsbtn.codeTime = 60;
										this.smsbtn.status = false;
									}
								},
								1000);
						} else {
							uni.showToast({
								icon: "none",
								title: "获取验证码失败",
								duration: 2000
							});
						}
					});
				}
			
			},
			findBackPwd: function() {
				userService.findBackPwd(this.form).then(res => {
					if (res.data.msg) {
						uni.showToast({
							icon: "none",
							title: res.data.msg,
							duration: 2000
						});
					}
					if (res.data.success) {
						uni.navigateTo({
							url: "/pages/ucenter/login"
						})
					}
				});
			}

		}
	}
</script>

<style>
	page {
		min-height: 100%;
		background-color: #FFFFFF;
	}

	.registercontent {
		width: 85%;
		margin: 0 auto;
	}

	.logoimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.is-input1 {
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		/* padding: 12rpx; */
		color: #353535;
		font-size: 32rpx;
		box-sizing: border-box;
		appearance: none;
		border: 2rpx solid #e5e5e5;
		box-shadow: none;
		border-radius: 14rpx;
		outline: 0;
		display: block;
		padding-left: 30rpx;
		margin: 0;
		font-family: inherit;
		background: #fff;
		resize: none;
	}

	.iconfont {
		position: absolute;
		font-size: 40rpx;
		right: 12%;
		z-index: 999;
		width: 105rpx;
		text-align: center;
		color: #353535;
		margin-top: -11%;
		background: #fff;
		border-top-right-radius: 44rpx;
		border-bottom-right-radius: 44rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.codeimg {
		position: absolute;
		font-size: 28rpx;
		right: 12%;
		z-index: 999;
		width: 200rpx;
		text-align: center;
		color: #353535;
		margin-top: -11%;
		background: #fff;
		border-top-right-radius: 44rpx;
		border-bottom-right-radius: 44rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.registerbtn button {
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 44rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #f35;
		opacity: 0.8;
	}

	button:after {
		border: 2rpx solid #f2f2f2;
	}

	.normal-text {
		font-size: 14px;
	}

</style>
